<template>
	<view class="container">
		<view class="header">
			<view class="header-title-left">欢迎来到盐池零工平台自助系统</view>
			<!-- <view class="back" @click="goBack"><uni-icons type="left" size="30"></uni-icons>返回</view> -->
			<view class="header-title">
				<view>零工详情</view>
			</view>
		</view>

		<view class="stats">
			<view class="stats-item">
				<view class="stats-item-label">零活名称：</view><text class="stats-item-value">{{ info.gigJobName }}</text>
			</view>
			<view class="stats-item">
				<view class="stats-item-label">招聘公司：</view><text class="stats-item-value">{{ info.companyName }}</text>
			</view>
			<view class="stats-item">
				<view class="stats-item-label">招聘零工：</view><text class="stats-item-value">{{ gigName }}</text>
			</view>
			<view class="stats-item">
				<view class="stats-item-label">岗位薪资：</view><text
					class="stats-item-value">{{ info.salaryMin }}-{{ info.salaryMax }}/天</text>
			</view>
			<view class="stats-item">
				<view class="stats-item-label">招聘人数：</view><text class="stats-item-value">{{ info.needCount }}</text>
			</view>
			<view class="stats-item">
				<view class="stats-item-label">招聘有效期：</view><text
					class="stats-item-value">{{ formattedTime(info.beginTime,info.endTime) }}</text>
			</view>
			<view class="stats-item">
				<view class="stats-item-label">联系电话：</view><text class="stats-item-value">{{ info.companyPhone }}</text>
			</view>
			<view class="stats-item">
				<view class="stats-item-label">年龄限制：</view><text
					class="stats-item-value">{{ info.limitAgeMin }}-{{ info.limitAgeMax }}</text>
			</view>
			<view class="stats-item">
				<view class="stats-item-label stats-item-label-job">零工要求：</view><text
					class="stats-item-value value-job">{{ info.jobRequirement }}</text>
			</view>
		</view>

		<!-- 	<view class="map">
			<view class="map-title">工作地址</view>
			<view></view>
		</view> -->

		<!-- <Message /> -->
		<!-- <button class="footer-button" @click="signUp">报名</button> -->
		<Footer class="footer-button" @click="goBack">返回</Footer>

		<view>
			<!-- 普通弹窗 -->
			<!-- 	<uni-popup ref="popup" background-color="#fff" borderRadius="10px 10px 10px 10px" class="popup">
				<view class="popup-content">
					<image class="popup-image-icon" src="../../static/images/success.png"></image>
					<view class="popup-title">
						报名成功
					</view>
					<view class="popup-buttons">
						<button style="color:#ffffff;backgroundColor:#EF7754;borderColor:none" @click="loginOut">退出登陆</button>
						<button style="color:#ffffff;backgroundColor:#4B81FF;borderColor:none" @click="look">我再看看</button>
					</view>
					<image class="popup-footer-icon" src="../../static/images/icon-left.png"></image>
				</view>
			</uni-popup> -->
		</view>


		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popupApply" background-color="#fff" @change="change" borderRadius="10px 10px 10px 10px"
				class="popup">
				<view class="popup-content">
					<view class="popup-title">
						<image class="popup-title-icon" src="../../static/images/comma.png"></image>
						请务工人员扫证
					</view>
					<view class="popup-sub-title">目前只支持二代身份证</view>
					<view class="popup-image" @click="startReadCard">
						<view class="popup-image-left">
							<view class="title">二代身份证</view>
							<view class="sub-title">放置在读卡区域</view>
							<view class="sub-gang"></view>
							<Ripple />
						</view>
						<view class="popup-image-right">
							<image style="width: 367px; height: 321px;" src="../../static/images/card.png"></image>
						</view>
					</view>

					<image class="popup-footer-icon" src="../../static/images/icon-left.png"></image>
				</view>
			</uni-popup>

			<!-- <audio id="audioPlayer" ref="audioPlayer" controls autoplay @play="onPlay" @pause="onPause" @ended="onEnded"
				src="../../static/audio/company_1.mp3"></audio> -->
		</view>

	</view>

</template>

<script>
	import {
		logOut
	} from '@/api/home/index';
	import {
		apply,
		details
	} from '@/api/worker/index.js';
	import dayjs from 'dayjs';
	import zzld from '../../utils/zzld.js';
	import {
		login
	} from '@/api/home/index.js';
	export default {
		components: {
			Message: () => import('../common/message.vue'),
			Footer: () => import('../common/bottom.vue'),
			Ripple: () => import('../common/ripple.vue')
		},
		data() {
			return {
				params: {
					gigJobId: null
				},
				gigJobId: null,
				info: {},
				currentUser: {},
				show: false,
			};
		},


		onLoad(option) {
			// const auth = this.$u.auth.check();
			const id = option.gigJobId ? option.gigJobId : 0;
			if (!id) {
				return uni.navigateBack()
			}
			console.log('id', id);

			this.gigJobId = id
			this.getData()
		},

		created() {
			// const user = uni.getStorageSync('user');
			// const tokenId = uni.getStorageSync('tokenId');
			// console.log('user', user.userName, user.idCard);
			// console.log('tokenId', tokenId);
			// this.user = user;
			// this.tokenId = tokenId;
		},
		computed: {
			gigName() {
				if (this.info.typeArr && this.info.typeArr.length > 0 && this.info.typeArr[0] && this.info.typeArr[0].gigName) {
					return this.info.typeArr[0].gigName;
				}
				return '';
			}
		},
		onHide() {
			console.log('页面隐藏');
			// 确保在页面卸载时清理资源
			this.cleanupReadCard();
		},
		onUnload() {
			console.log('页面卸载');
			// 确保在页面卸载时清理资源
			this.cleanupReadCard();
		},
		methods: {
			formattedTime(beginTime, endTime) {
				return `${dayjs(beginTime).format('YYYY-MM-DD')}~${dayjs(endTime).format('YYYY-MM-DD')}`;
			},
			goBack() {
				uni.navigateBack()
			},

			getData() {
				details(this.gigJobId).then((res) => {
					console.log('res', res);
					this.info = res.data
				})
			},

			initReadCard() {
				zzld.init(); // 重新初始化 zzld
				this.bindCallbacks(); // 绑定B页面特有的回调
			},
			bindCallbacks() {
				// 绑定B页面特有的回调
				zzld.readIdCardCallback = async (res) => {
					await this.handleIdCardData(res);
				};
			},
			startReadCard() {
				zzld.showToast("==开始读卡==");
				zzld.startReadIdCard();
			},

			cleanupReadCard() {
				// 清理全局对象上的方法
				if (window.android) {
					// 移除 Android 相关的回调函数
					delete window.android.readIdCardCallback;
					delete window.android.uploadCallback;
					delete window.android.downloadCallback;
					delete window.android.locationCallback;
				}
				// 清理 zzld 对象
				if (window.zzld) {
					window.zzld = null;
				}
				// 移除 startReadIdCard 方法
				delete window.startReadIdCard;
			},
			// 读卡
			startReadCard() {
				zzld.showToast("==开始读卡==");
				zzld.startReadIdCard((res) => {
					zzld.showToast(".....读取数据...");
					console.log('数据', res);
					console.log('res', typeof res);
					const head = this.headParse(res);
					const data = this.infoParse(res);
					console.log('data', data);
					console.log('data', head);
					const newData = {
						address: data._Addr,
						idCard: data._IDCard,
						idCardExpirationDate: data._StartDate + ' - ' + data._EndDate,
						issuingAuthority: data._Department,
						nation: data._People,
						photo: head,
						userName: data._PeopleName,
						sex: data._Sex,
					}
					console.log('newData', newData);
					uni.setStorageSync('user', newData);
					login(newData).then((res) => {
						console.log('res', res);
						uni.setStorageSync('token', {
							token: res.data.token
						})
						uni.setStorageSync('tokenId', res.data.tokenId)
						window.zzld = null;
						console.log('newData', newData);
						console.log('newData', res.data.user);
						this.doubleConfir(newData, this.info, this.gigJobId);
						// const type = this.type;
						// if (type === 'fast') {
						// 	uni.$u.route({
						// 		url: 'pages/fast/index'
						// 	})
						// } else {
						// 	uni.$u.route({
						// 		url: 'pages/company/index'
						// 	})
						// }
					})
				})
			},

			async handleIdCardData(res) {
				zzld.showToast(".....读取数据...");
				console.log('数据', res);
				console.log('res', typeof res);
				const head = this.headParse(res);
				const data = this.infoParse(res);
				console.log('data', data);
				console.log('data', head);

				// 判断是否重复
				if (this.currentUser) {
					uni.showToast({
						title: '提示',
						content: '报名限制一人',
					})
					return;
				}

				const newData = {
					address: data._Addr,
					idCard: data._IDCard,
					idCardExpirationDate: data._StartDate + ' - ' + data._EndDate,
					issuingAuthority: data._Department,
					nation: data._People,
					photo: head,
					userName: data._PeopleName,
					sex: data._Sex,
				}

				console.log('newData', newData);
				this.currentUser = newData;
				uni.setStorageSync('user', newData);
				login(newData).then((res) => {
					console.log('res', res);
					uni.setStorageSync('token', {
						token: res.data.token
					})
					uni.setStorageSync('tokenId', res.data.tokenId)
					console.log('newData', newData);
					console.log('newData', res.data.user);
					this.doubleConfir(newData, this.info, this.gigJobId);

					// const data = {
					// 	gigCode: this.info.gigCode,
					// 	gigJobId: this.gigJobId
					// }
					// console.log('data', data);
					// apply(data).then(() => {});
					// this.$refs.popupApply.close();
					// this.$refs.popup.open('center')

					// window.zzld = null;
					// const type = this.type;
					// if (type === 'fast') {
					// 	uni.$u.route({
					// 		url: 'pages/fast/index'
					// 	})
					// } else {
					// 	uni.$u.route({
					// 		url: 'pages/company/index'
					// 	})
					// }
				})
			},

			// 二次确认函数
			doubleConfir(data, info, id) {
				uni.showModal({
					title: '请确认您的身份信息',
					content: `姓名：${data.userName};身份证号码：${data.idCard}`,
					showCancel: true,
					cancelText: "取消",
					cancelColor: "#000000",
					confirmText: "确定",
					confirmColor: "#5E9EFD",
					success: function(res) {
						if (res.confirm) {
							console.log("用户点击了确定");
							console.log('info,id', info, id);
							const data = {
								gigCode: info.gigCode,
								gigJobId: id,
							}
							apply(data).then(() => {
								uni.showToast({
									title: '报名成功',
									icon: 'success',
								})
							}).catch((err) => {
								console.log('err', err);
							});
							// this.$refs.popup.open('center');
						} else if (res.cancel) {
							console.log("用户点击了取消");
						}
					},
				})
				this.show = false;
				this.$refs.popupApply.close();
			},

			infoParse(str) {
				// 使用正则表达式提取 info 后面的内容
				const match = str.match(/"info"\s*:\s*({[^}]*})/);

				if (match && match[1]) {
					const infoString = match[1];
					console.log(infoString); // 输出: {"name": "123","sex": "男"}

					// 如果需要将提取的字符串转换为对象
					try {
						const infoObject = JSON.parse(infoString);
						console.log(infoObject); // 输出: { name: '123', sex: '男' }
						return infoObject
					} catch (error) {
						console.error("Error parsing JSON:", error.message);
					}
				} else {
					console.log('No match found');
				}
			},

			headParse(jsonString) {
				// 分割字符串并获取 "head" 后面的值，去掉外层的双引号
				let result = "data:image/png;base64," + jsonString.split('"head":"')[1].split('"')[0];
				return result.replace(/[\r\n]/g, '').trim();
			},

			change(e) {
				console.log('e', e);
				this.show = e.show;
				if (!e.show) {
					this.currentUser = {};
				}
			},
			signUp() {
				// this.initReadCard();
				// this.startReadCard();
				this.$refs.popupApply.open('center');
				// const data = {
				// 	gigCode: this.info.gigCode,
				// 	gigJobId: this.gigJobId
				// }
				// console.log('data', data);
				// apply(data).then(() => {})
				// this.$refs.popup.open('center')

				setTimeout(() => {
					const data = {
						userName: '高小飞',
						isCard: '64032319990314041X'
					}
					const info = {
						gigCode: "YC10012457"
					}
					const id = 60
					this.doubleConfir(data, info, id);
					// this.$refs.popupApply.close();
				}, 3000)

			},
			look() {
				this.$refs.popup.close()
			},
			loginOut() {
				uni.showLoading({
					title: '退出中...'
				})
				logOut(this.tokenId).then(() => {
					uni.removeStorageSync('user');
					uni.removeStorageSync('token');
					uni.removeStorageSync('tokenId');
					uni.hideLoading();
					uni.showToast({
						title: '退出成功'
					})
					uni.$u.route({
						url: 'pages/home/index'
					})
				})
			}
		},
	}
</script>

<style lang="less" scoped>
	/* 基础样式 */
	body,
	page {
		font-family: Arial, sans-serif;
		background-color: #f4f6fa;
		margin: 0;
		padding: 0;
	}

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-items: center;
		height: 100%;
		/* background-color: #CBE1FB; */
		/* 背景颜色 */
		background-image: url('../../static/images/background_2.png');
		/* 背景图片 */
		// background-size: cover;
		background-position: center;
		background-blend-mode: multiply;
		/* 背景混合模式，使颜色和图片叠加 */
	}

	.header {
		padding: 50px;
		width: 90%;

		position: relative;

		.header-title-left {
			text-align: left;
			font-size: 32px;
			color: #384161;
			width: 100%;
		}

		.header-title {
			text-align: center;
			font-size: 120px;
			font-weight: 600;
			color: #4B81FF;
			width: 100%;
			margin: 100px auto;
			/* 使文本居中时占据整行 */


		}

		.back {
			position: absolute;
			font-size: 24px;
			color: #384161;
			line-height: 0px;
			width: 80px;
			height: 40px;
			left: 46px;
			top: 120px;
			/* 自动布局 */
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			border: 1px solid #fff;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
			padding: 8px 24px 8px 24px;
		}
	}


	.stats {
		display: flex;
		// justify-content: space-around;
		flex-wrap: wrap;
		text-align: left;
		width: 90%;
		margin: 0 auto;
		background-color: #FFFFFF33;
		/* 背景透明 */
		border-radius: 10px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		/* opacity: 0.2; */
		padding: 20px 10px;
		margin: 30px 14px;
		display: flex;
		flex-direction: column;
		/* 上下结构 */
		// align-items: center;
		border: 2px solid #fff;

		.stats-item {
			display: flex;
			margin: 20px 20px;
			justify-content: flex-start;

			.stats-item-label {
				font-size: 22px;
				font-weight: bold;
				color: #4B81FF;
			}

			.stats-item-label-job {
				// width: 400px;
			}

			.stats-item-value {
				font-size: 22px;
				color: #384161;
			}

			.value-job {
				flex: 1;
			}
		}
	}

	.map {
		display: flex;
		// justify-content: space-around;
		flex-wrap: wrap;
		text-align: left;
		width: 90%;
		margin: 0 auto;
		background-color: #FFFFFF33;
		/* 背景透明 */
		border-radius: 10px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		/* opacity: 0.2; */
		padding: 20px 10px;
		margin: 30px 14px;
		display: flex;
		flex-direction: column;
		/* 上下结构 */
		// align-items: center;
		border: 2px solid #fff;

		.map-title {
			font-size: 24px;
			font-weight: 600;
			color: #384161;
			display: flex;
			margin: 0px 20px;
		}
	}

	.stat-value-container {
		font-size: 22px;
		font-weight: bold;
		color: #384161;
		line-height: 60px;
	}



	.popup-content {
		height: 1000px;
		width: 850px;
		padding: 50px;
		border-radius: 10px;
		text-align: center;
		background-color: #DBEAFB;
		background-image: url('../../static/images/card_bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;

		.popup-title {
			text-align: center;
			font-size: 64px; // 36
			font-weight: 600;
			line-height: 60px;
			margin: 100px auto 50px;
			position: relative;

			.popup-title-icon {
				position: absolute;
				top: -100px;
				left: 50px;
				width: 130px;
				height: 130px;
			}
		}

		.popup-sub-title {
			text-align: center;
			font-size: 36px; // 36
			font-weight: 600;
			line-height: 60px;
		}



		.popup-image {
			width: 630px;
			border-radius: 20px;
			margin: 150px auto;
			height: 380px;
			padding: 50px 50px;
			background: linear-gradient(to bottom, #FFFFFFFF, #ECF6FEFF);
			display: flex;
			text-align: center;

			.popup-image-left {
				width: 34%;
				text-align: left;

				.title {
					font-size: 36px;
					font-weight: 600;
					line-height: 60px;
				}

				.sub-title {
					font-size: 24px;
					font-weight: 500;
					line-height: 60px;
					color: #687792;
				}

				.sub-gang {
					width: 68px;
					right: 566px;
					height: 4px;
					margin-top: 60px;
					border-radius: 16px;
					background: #d4dadf;
				}
			}

			.popup-image-right {
				margin: auto;
			}
		}

		.popup-footer-icon {
			width: 200px;
			height: 150px;
			position: absolute;
			left: 0px;
			bottom: 0px;
		}
	}


	// .popup-content {
	// 	height: 850px;
	// 	width: 850px;
	// 	padding: 50px;
	// 	border-radius: 10px;
	// 	text-align: center;
	// 	background-color: #DBEAFB;
	// 	background-image: url('../../static/images/card_bg.png');
	// 	background-repeat: no-repeat;
	// 	background-size: 100% 100%;
	// 	position: relative;

	// 	.popup-image-icon {
	// 		width: 302px !important;
	// 		height: 266px !important;
	// 		margin: 150px auto 50px;
	// 	}

	// 	.popup-title {
	// 		// display: flex ;
	// 		text-align: center;
	// 		font-size: 34px;
	// 		font-weight: 600;
	// 		color: #384161;
	// 		line-height: 32px;
	// 		margin: 0px auto 50px;
	// 		position: relative;
	// 	}

	// 	.popup-buttons {
	// 		display: flex;
	// 		justify-content: center;
	// 		margin-top: 200px;

	// 		button {
	// 			width: 200px;
	// 			margin-left: 0;
	// 			margin-right: 20px;
	// 		}
	// 	}

	// 	.popup-image {
	// 		width: 630px;
	// 		border-radius: 20px;
	// 		margin: 150px auto;
	// 		height: 380px;
	// 		padding: 50px 50px;
	// 		background: linear-gradient(to bottom, #FFFFFFFF, #ECF6FEFF);
	// 		display: flex;
	// 		text-align: center;

	// 		.popup-image-left {
	// 			width: 34%;
	// 			text-align: left;

	// 			.title {
	// 				font-size: 36px;
	// 				font-weight: 600;
	// 				line-height: 60px;
	// 				color: #384161;
	// 			}

	// 			.sub-title {
	// 				font-size: 24px;
	// 				font-weight: 500;
	// 				line-height: 60px;
	// 				color: #687792;
	// 			}

	// 			.sub-gang {
	// 				width: 68px;
	// 				right: 566px;
	// 				height: 4px;
	// 				margin-top: 60px;
	// 				border-radius: 16px;
	// 				background: #d4dadf;
	// 			}
	// 		}

	// 		.popup-image-right {
	// 			margin: auto;
	// 		}
	// 	}

	// 	.popup-footer-icon {
	// 		width: 200px;
	// 		height: 150px;
	// 		position: absolute;
	// 		left: 0px;
	// 		bottom: 0px;
	// 	}
	// }

	.footer-button {
		position: absolute;
		left: 5%;
		bottom: 0;
	}
</style>